<!-- posts.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态列表</title>
</head>
<body>
    <div id="posts-container"></div>
    <script>

document.addEventListener('DOMContentLoaded', function() {
    function fetchPosts() {
        fetch('get_posts.php')
            .then(response => response.json())
            .then(posts => {
                const container = document.getElementById('posts-container');
                container.innerHTML = ''; // 清空现有内容
                posts.forEach(post => {
                    const postElement = document.createElement('div');
                    postElement.className = 'post';
                    postElement.innerHTML = `
                        <h4>${post.username}</h4>
                        <p>${post.content}</p>
                        ${post.image_url ? `<img src="${post.image_url}" alt="动态图片">` : ''}
                        <small>${new Date(post.created_at).toLocaleString()}</small>
                    `;
                    container.appendChild(postElement);
                });
            })
            .catch(error => console.error('Error:', error));
    }

    fetchPosts(); // 初始加载
});
</script>

</body>


</html>